<!--
 * @Author: Y先森
 * @Date: 2023-04-24 10:55:03
 * @LastEditors: y && 250048395@qq.com
 * @LastEditTime: 2023-05-06 15:16:33
 * @FilePath: \y-website\src\views\design\components\list\item.vue
-->
<template>
  <div class="rounded pb-1">
    <div class="relative w-full rounded cursor-zoom-in group" :style="{'backgroundColor':randomRGB()}" @click="onToPinsClick">
      <!-- 图片 -->
      <img
        v-lazy
        ref="imgTarget"
        class="w-full rounded bg-transparent"
        :src="data.photo"
        :style="{
          height: (width / data.photoWidth) * data.photoHeight + 'px'
        }"
      />
      <!-- 遮罩层 -->
      <div class="hidden opacity-0 w-full h-full bg-zinc-900/50 absolute top-0 left-0 rounded duration-300 group-hover:opacity-100 xl:block">
        <!-- 分享 -->
        <m-button class="absolute top-1.5 left-1.5 dark:bg-zinc-900/50 dark:hover:bg-main">分享</m-button>
        <!-- 点赞 -->
        <m-button class="absolute top-1.5 right-1.5 dark:bg-zinc-900/50 bg-zinc-100 " type="info"  icon="heart" iconClass="fill-zinc-900 dark:fill-zinc-100"></m-button>
        <!-- 下载 -->
        <m-button class="absolute bottom-1.5 left-1.5 dark:bg-zinc-900/50 bg-zinc-100 " type="info"  icon="download" iconClass="fill-zinc-600 dark:fill-zinc-100" @click="onDownload()"></m-button>
        <!-- 全屏 -->
        <m-button class="absolute bottom-1.5 right-1.5 dark:bg-zinc-900/50 bg-zinc-100 " type="info" icon="full" iconClass="fill-zinc-900 dark:fill-zinc-100" @click="onImgFullScreen"></m-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { randomRGB } from '@/utils/color'
import { saveAs } from 'file-saver'
import { message } from '@/libs'
import { computed, ref } from 'vue'
import { useElementBounding, useFullscreen } from '@vueuse/core'
const props = defineProps({
  data:{
    type: Object,
    required: true
  },
  width:{
    type:Number
  }
})

const emits = defineEmits(['click'])

/**
 * 下载按钮点击事件
 */
const onDownload = ()=>{
  message('success','图片正在下载')
  // 延迟一段时间执行，可以得到更好的体验
  setTimeout(() => {
    // 下载图片链接
    saveAs(props.data.photoDownLink)
  },100)
}

/**
 * 进入全屏方法
 */
const imgTarget = ref(null)
const {enter:onImgFullScreen } = useFullscreen(imgTarget)

/**
 * pins 跳转记录，记录图片的中心点(X | Y 位置 + 宽 | 高一半)
 */
const {
  x: imgContainerX,
  y: imgContainerY,
  width: imgContainerWidth,
  height: imgContainerHeight
} = useElementBounding(imgTarget)
const imgContainerCenter = computed(() => {
  return {
    translateX: parseInt(imgContainerX.value + imgContainerWidth.value / 2),
    translateY: parseInt(imgContainerY.value + imgContainerHeight.value / 2)
  }
})
// const imgContainerCenter = () => {
//   const {
//     x: imgContainerX,
//     y: imgContainerY,
//     width: imgContainerWidth,
//     height: imgContainerHeight
//   } = imgTarget.value.getBoundingClientRect()
//   return {
//     translateX: parseInt(imgContainerX + imgContainerWidth / 2),
//     translateY: parseInt(imgContainerY + imgContainerHeight / 2)
//   }
// }

/**
 * 点击详情事件传递给父级
 */
 const onToPinsClick = ()=> {
  emits('click',{
    id:props.data.id,
    // location: imgContainerCenter()
    location: imgContainerCenter.value
  })
}
</script>
